<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />

    <div style="margin-top: 10px" class="Main">
      <el-card class="MainCard" shadow="always" :body-style="{ padding: '10' }">
        <!-- card body -->
        <div class="MainCardRight">
          <div>
            <h1>未授权系统</h1>
            <Table :tableHeader="tableHeader" :tableData="tableData1" :TableHeight="130" />
          </div>
          <div style="margin-left: 10px">
            <h1>未授权程序明细</h1>
            <Table :tableHeader="tableHeader1" :tableData="tableData1" :TableHeight="130" :selection="true" />
          </div>
          <div style="margin-left: 10px">
            <h1>已授权系统</h1>
            <Table :tableHeader="tableHeader2" :tableData="tableData1" :TableHeight="130" />
          </div>
          <div style="margin-left: 10px">
            <h1>已授权程序明细</h1>
            <Table :tableHeader="tableHeader3" :tableData="tableData1" :TableHeight="130" :selection="true" />
          </div>
        </div>
        <PageModule :PageData="{ pageSizeShow: true }" />
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'ProgramAuthorization'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref } from 'vue'

const formList = ref([
  {
    type: 'select',
    selectValue: '',
    selectP: '职务',
    selectLabel: '',
    selectOptions: []
  }
])

const findClicked = () => {}

const tableHeader = ref([
  {
    label: '系统名称',
    prop: 'slipNo'
  }
])

const tableHeader1 = ref([
  {
    label: '程序名称',
    prop: 'slipNo'
  }
])

const tableHeader2 = ref([
  {
    label: '系统名称',
    prop: 'slipNo'
  }
])

const tableHeader3 = ref([
  {
    label: '程序名称',
    prop: 'slipNo'
  }
])

const tableData1 = [
  {
    date: '20230427',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '12312'
  }
]
</script>

<style lang="less" scoped>
h1 {
  font-size: 16px;
}

.MainCardRight {
  display: flex;
}
</style>
